跳到主要内容

一、 常用 HTML5 的新特性

  • data-*:自定义属性,用户储存私有数据
  • contenteditable:使元素内容可编辑
  • draggable:拖拽元素
  • localStorage/sessionStorage:本地储存(属于 JS 范畴,但 HTML 结构支持)

二、 <meta> 标签的关键用法

  • charset:指定特定字符编码(<meta charset="UTF-8">
  • viewport:移动端适配(<meta name="viewport" content="width=device-width, initial-scale=1">
  • description:页面描述,用户 SEO

三、 表单增强

1. 新输入类型

  • email:自动验证邮箱格式
  • number:只允许数字
  • date:日期选择器
  • range:滑块

2. 新属性

  • required:必填
  • placeholder:提示文本
  • pattern:正则验证
  • autocomplete:自动填充

3. 表单验证 API

  • checkValidity():检查表单是否有效
  • setCustomValidity():自定义错误提示

四、 媒体元素

无需使用 Flash (现代浏览器也不支持 Flash 呀),直接嵌入音视频。支持 MP4、WebM、Ogg 等格式。

  • <video>:视频
  • <audio>:音频
  • 支持 <controls>:控件
  • autoplay:自动播放
  • loop:循环

五、 新 API

1. 本地储存

localStorage 持久化,容量为 5MB; sessionStorage 是会话级别的,在关闭页面的时候会消失。

2. 离线应用

Application Cache

注意

已被废弃,被 Service Worker 代替

3. 绘图

  • <canvas>: 位图绘图
  • SVG:矢量图,可直接嵌入 HTML 中

4. 地理定位

使用 navigator.geolocation 获取用户的位置

5. Web Workers

后台线程,不阻塞主线程。除非在单核设备上,哈哈哈哈